關於瀏覽器物件模型 (BOM)

BOM，是 JavaScript 與瀏覽器溝通的橋樑，JavaScript 可以透過 BOM 對瀏覽器進行各種操作，包含開啟及關閉視窗、改變視窗大小、計時器、取得位址之類的。

BOM 的核心是 window 物件，而 window 物件提供的特性主要為 document、location、navigator、screen、history 以及 frames。

什麼是 window？

瀏覽器物件模型有著階層性的架構，最上層便是 window 物件，代表著瀏覽器視窗本身。
所有的 BOM 都可透過 window 來存取。window 物件的使用不須經過宣告，可以直接使用。事實上，在 JavcaScript 中，所有的全域變數、函式、物件，其實都是屬於 window 物件。

關於 BOM 跟 window 物件，我在先前的筆記中曾經提過，如果沒看過的話可以搭配著一起看喔：
JavaScript 初心者筆記: JS 內建物件 - 全域物件篇

以下將介紹一些常用的 window 功能。

回上一頁、到下一頁 - window.history

此功能可以應用在電商網站，引導使用者的購物流程。

回上一頁：

1. 指定 DOM
2. 綁定 click 事件，點擊後執行函式，函式中寫入 window.history.back() 語法

document.querySelector('.back').onclick = function(){
  window.history.back();
}

使用 history 語法後，瀏覽器就會開始記錄使用者造訪的網頁、頁數等等。

接著就可繼續使用「下一頁」語法。

到下一頁：

跟回上頁的做法雷同，差別只在 back() 要改成 forward()。

document.querySelector('.next').onclick = function(){
  window.history.forward();
}

用 JS 設計列印功能 - print()

常用在票券、QRcord、發票、訂單資訊的輸出。
點擊某元素即可列印的寫法：

1. 指定 DOM
2. 綁定 click 事件並執行函式，裡面放入 window.print(); 語法

提供當前網頁的位址 - window.location

把網址列的東西羅列出來，讓開發者可以撈自己想要的東西，也可以用此語法跳轉到其他網址。
寫法：window.location.href = "網址";
location 是最有用的 BOM 之一，因此其他特性跟方法請見補充資料：
JavaScript BOM — — “location 对象”的注意要点

另開新視窗 - window.open

寫法：指定 DOM，綁定事件跟函式，放入 window.open('要前往的網址');
open() 裡面的參數很多，除了第一個參數是網址以外，第二個參數不寫的話預設為另開視窗。

動態擷取瀏覽器高度 — innerHeight

網頁 banner 製作滿版背景、圖片時可以用。
window.innerHeight 可以偵測到視窗高度（如果開 chrome 開發者工具，會佔掉視窗高度），而 window.outerHeight 則可以偵測整個瀏覽器的高度。此外，寬度的部分相對應地也有 innerWidth、outerWidth 喔。

如何用 JS 讓圖片自適應視窗大小

1. 圖片插入方式用 CSS background 屬性
2. 在 JS 中選取 DOM，動態更改 CSS 中的圖片高度
   document.querySelector('.圖片class').style.height = window.innerHeight + "px";
3. 如果希望使用者拖動瀏覽器大小的同時，圖片高度也能跟著變化的話，要再加上 onresize() 方法去啟動函式

window.onresize = function(){
  document.querySelector('.圖片class').style.height = window.innerHeight + "px"}

參考資料：JavaScript 入門系列：BOM 和 DOM 筆記